<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            background-color: rgba(255, 255, 255, 0);
        }
        .slides-enter-active,
        .slides-leave-active {
            transition: opacity .3s;
        }

        .slides-enter,
        .slides-leave-to {
            opacity: 0;
        }

        .slidesBottom-enter-active {
            transition: all .3s ease;
        }

        .slidesBottom-leave-active {
            transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }

        .slidesBottom-enter,
        .slidesBottom-leave-to {
            transform: translateY(200px);
        }
        .actionSheet-mask {
            width: 100%;
            position: fixed;
            left: 0px;
            top: 0px;
            z-index: 10;
            background: rgba(0, 0, 0, 0.2);
        }
        .actionSheetInput {
              width: 100%;
              position: fixed;
              bottom: 0;
              left: 0;
              z-index: 20;
              background: #fff;
              border-radius: 15px 15px 0 0!important;
        }
        .aui-tab-item{
          font-size: 18px;
          height: 18px;
          line-height: 18px;
          margin: 21px 0 32px 0;
        }
        .starIcon{
          display: inline-block;
          width: 24px;
          height: 24px;
          margin-right: 18px;
        }
        .inputComment{
          width: 326px;
          margin: 19px auto 0;
          box-shadow: 0px 0px 15px #EFEFEF;
          border-radius: 5px;
        }
        .inputComment input{
          text-align: center;
          font-size: 17px;
          height: 51px;
          line-height: 20px;
          letter-spacing: 2px;
        }
        .subBtn{
          width: 245px;
          height: 40px;
          margin: 29px auto 33px;
          background:url(../../image/comSub@2x.png) no-repeat center;
          background-size:100% 100%;
        }
        /*适配屏幕320px*/
        @media (max-width: 320px) {
          .inputComment{
            width: 217px;
          }
          .inputComment input{
            font-size: 12px;
          }
        }
        /*适配屏幕320px*/
    </style>
</head>

<body>
    <div class="moreSection" id="moreSection" v-bind:style="{height:wHeight}">
        <!--弹出输入金额 -->
        <transition name="slides">
            <div class="actionSheet-mask" id="" v-bind:style="{height:wHeight}" v-if="showMask1" @click.self="">
            </div>
        </transition>
        <transition name="slidesBottom">
            <div class="actionSheetInput" v-if="showMask2">
                <div class="aui-tab"  style="background-color:rgba(255, 255, 255, 0);">
                    <div class="aui-tab-item"></div>
                    <div class="aui-tab-item">评价</div>
                    <div class="aui-tab-item"></div>
                </div>
                 <p style="text-align: center;">
                   <img src="../../image/main/geyStar@2x.png" class="starIcon">
                   <img src="../../image/main/geyStar@2x.png" class="starIcon">
                   <img src="../../image/main/geyStar@2x.png" class="starIcon">
                   <img src="../../image/main/geyStar@2x.png" class="starIcon">
                   <img src="../../image/main/geyStar@2x.png" class="starIcon">
                 </p>
                 <p class="inputComment"><input type="text" placeholder="其他想说的（将匿名并延迟告知）"></p>
                 <h1 class="subBtn"></h1>
            </div>
        </transition>
        <!-- 弹出输入金额 -->
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/fastclick.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
    };
    // 去掉iOS的点击延时问题
    window.addEventListener('load', function() {
        FastClick.attach(document.body);
    }, false);
    ////初始化页面
    var app = new Vue({
        el: '#moreSection',
        data: {
           wHeight : '',
           showMask1 : true,
           showMask2 : false,
        },
        methods: {
            init: function() {
                /////初始化页面高度
                var wh = document.documentElement.clientHeight || document.body.clientHeight;
                this.wHeight = (wh) + 'px';
            }
        },
        mounted: function() {
            this.showMask2 = !this.showMask2;
            this.init();
        }
    })

</script>

</html>
